import { Image, Space, Tag } from "antd";
import Iconfont from "@/components/IconFont";
import finishImg from "./finish.png";
import { cpText } from "@/utils/utils";
import { labelIconMap, labelNameMap } from "@/utils/config";
import Style from "../index.module.less";


const RowItem = ({ label, value, children, direction }) => {
	return (
		<div className={Style.rowItem} style={{ flexDirection: direction || "row", marginBottom: 8 }}>
			<label htmlFor="">{label}：</label>
			<div style={{ flex: 1, fontWeight: 500, maxWidth: 330 }}>
				{children || value || <span className={Style.red}>(无)</span>}
			</div>
		</div>
	);
};

const ClipboardText = ({ text }) => {
	return (
		<span>
			<span className={Style.font18}>{text}</span>{" "}
			<Iconfont
				type="iconclipboard"
				onClick={() => {
					cpText(text);
				}}
			/>
		</span>
	);
};
const RenderImg = ({ url }) => {
	return url ? (
		<Image src={url} alt=" " style={{ width: 128 }} />
	) : (
		<img src="https://imgniu.zhaojiafang.com/front-web/ERP/emptyimg.png" style={{ width: 128 }} />
	);
};

const OrderInfoCard = ({ data }) => {
	const { order, sendStatus } = data;
	const sy = { position: "relative", maxHeight: 387, minWidth: 900, overflow: "auto" };
	const pad = sendStatus ? { paddingRight: 132 } : {};
	return (
		<div className={`${Style.card}`} style={{ ...sy, ...pad }}>
			<div className="flex" style={{ gap: 40 }}>
				<div className="flex" style={{ gap: 16 }}>
					<RowItem label="吊牌" direction="column" value={<RenderImg url={order?.markImage} />} />
					<RowItem label="吊牌2" direction="column" value={<RenderImg url={order?.praiseCard} />} />
				</div>
				<div className="flex-column" style={{ width: "auto" }}>
					<RowItem label="下单店铺" value={order?.shop} />
					<RowItem label="出库单号" children={order?.outboundNo && <ClipboardText text={order?.outboundNo} />} />
					<RowItem label="系统订单号" children={order?.systemNo && <ClipboardText text={order?.systemNo} />} />
					<RowItem label="快递公司" value={order?.expressCompany} />
					<RowItem
						label="快递单号"
						children={
							order?.waybillNo &&
							(order?.waybillNo == "获取中..." ? <>{order?.waybillNo}</> : <ClipboardText text={order?.waybillNo} />)
						}
					/>
					<RowItem label="收货地址" value={order && `${order.consignee}  ${order.consigneePhone}  ${order.consigneeAddress}`} />
				</div>
				<div className="flex-column" style={{ width: "auto" }}>
					<RowItem
						label="订单标签"
						value={
							order?.orderLabelArray?.length && (
								<Space size={4}>
									{Array.isArray(order?.orderLabelArray) &&
										order?.orderLabelArray?.map((item, idx) =>
											labelNameMap[item.labelId] ? (
												<Iconfont key={idx} type={labelIconMap[item.labelId]} />
											) : (
												<Tag key={idx} color="#B1B7C3">
													{item.labelName}
												</Tag>
											)
										)}
								</Space>
							)
						}
					/>
					<RowItem
						label="订单备注"
						value={order?.orderNote && <span className={Style["truncate-3-lines"]}>{order?.orderNote}</span>}
					/>
					<RowItem
						label="买家备注"
						value={order?.buyerNote && <span className={Style["truncate-3-lines"]}>{order?.buyerNote}</span>}
					></RowItem>
					<RowItem label="卖家备注" value={order?.sellerNote} />
				</div>
			</div>

			{sendStatus && <img src={finishImg} width={124} height={124} className={Style.finish} />}
		</div>
	);
};
export default OrderInfoCard;
